<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>{$system_config.name|default='平台'}-后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__CDN__/assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__CDN__/assets/layui/src/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="__CDN__/assets/gojs/layui-admin.css" media="all">
    <style type="text/css">
        .layui-table-cell{height: auto!important;}
        .layui-layer-tips{width: auto!important;}
    </style>
</head>
<body>

<style>
    #myOverviewDiv {
        position: absolute;
        width: 200px;
        height: 100px;
        top: 65px;
        left: 20px;
        background-color: #f2f2f2;
        z-index: 300; /* make sure its in front */
        border: solid 1px #7986cb;
    }
    #myDiagramDiv{
        background-color: rgb(242, 242, 242);
        border: 1px solid black;
        width: 100%;
        height: 700px;
        position: relative;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        cursor: auto;
    }
    #myDiagramDiv canvas{
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 2;
        user-select: none;
        width: 904px;
        height: 698px;
        cursor: auto;
    }
    #myOverviewDiv{
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    }
    #myOverviewDiv canvas{
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 2;
        user-select: none;
        width: 198px;
        height: 98px;
    }
</style>
<div class="layui-fluid" id="LAY-app-message">
    <div class="layui-card">
        <div class="layui-card-header">推荐关系</div>
        <div class="layui-card-body layui-form">
            <div class="table-head-btn" style="margin-bottom: 10px;">
                <div class="layui-inline">
                    <input class="layui-input" type="search" id="mySearch" onkeypress="if (event.keyCode === 13) searchDiagram()" placeholder="会员昵称|手机号" autocomplete="off">
                </div>
                <button class="layui-btn" onclick="searchDiagram()">搜索</button>
            </div>
            <div id="myDiagramDiv">
                <canvas tabindex="0" width="904" height="698">
                </canvas>
                <div style="position: absolute; overflow: auto; width: 904px; height: 698px; z-index: 1;">
                    <div style="position: absolute; width: 3278.51px; height: 1739.05px;"></div>
                </div>
            </div>
            <div id="myOverviewDiv">
                <canvas tabindex="0" width="198" height="98">
                </canvas>
                <div style="position: absolute; overflow: auto; width: 198px; height: 98px; z-index: 1;">
                    <div style="position: absolute; width: 1px; height: 1px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="__CDN__/assets/gojs/app.v2.css">
<script src="__CDN__/assets/gojs/jquery.js?v=212"></script>
<script src="__CDN__/assets/gojs/go.js?v=1324"></script>
<!--推荐网络图-->
<script type="application/javascript">
    function init() {
        if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
        var $ = go.GraphObject.make;  // for conciseness in defining templates
        // some constants that will be reused within templates
        var mt8 = new go.Margin(8, 0, 0, 0);
        var mr8 = new go.Margin(0, 8, 0, 0);
        var ml8 = new go.Margin(0, 0, 0, 8);
        var roundedRectangleParams = {
            parameter1: 2,  // set the rounded corner
            spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight  // make content go all the way to inside edges of rounded corners
        };
        myDiagram =
            $(go.Diagram, "myDiagramDiv",  // the DIV HTML element
                {
                    // Put the diagram contents at the top center of the viewport
                    initialDocumentSpot: go.Spot.TopCenter,
                    initialViewportSpot: go.Spot.TopCenter,
                    // OR: Scroll to show a particular node, once the layout has determined where that node is
                    // "InitialLayoutCompleted": function(e) {
                    //  var node = e.diagram.findNodeForKey(28);
                    //  if (node !== null) e.diagram.commandHandler.scrollToPart(node);
                    // },
                    layout:
                        $(go.TreeLayout,  // use a TreeLayout to position all of the nodes
                            {
                                isOngoing: false,  // don't relayout when expanding/collapsing panels
                                treeStyle: go.TreeLayout.StyleLastParents,
                                // properties for most of the tree:
                                angle: 90,
                                layerSpacing: 80,
                                // properties for the "last parents":
                                alternateAngle: 0,
                                alternateAlignment: go.TreeLayout.AlignmentStart,
                                alternateNodeIndent: 15,
                                alternateNodeIndentPastParent: 1,
                                alternateNodeSpacing: 15,
                                alternateLayerSpacing: 40,
                                alternateLayerSpacingParentOverlap: 1,
                                alternatePortSpot: new go.Spot(0.001, 1, 20, 0),
                                alternateChildPortSpot: go.Spot.Left
                            })
                });
        // This function provides a common style for most of the TextBlocks.
        // Some of these values may be overridden in a particular TextBlock.
        function textStyle(field) {
            return [
                {
                    font: "12px Roboto, sans-serif", stroke: "rgba(0, 0, 0, .60)",
                    visible: false  // only show textblocks when there is corresponding data for them
                },
                new go.Binding("visible", field, function(val) { return val !== undefined; })
            ];
        }
        // define Converters to be used for Bindings
        function theNationFlagConverter(nation) {
            return nation;
        }
        // define the Node template
        myDiagram.nodeTemplate =
            $(go.Node, "Auto",
                {
                    locationSpot: go.Spot.TopCenter,
                    isShadowed: true, shadowBlur: 1,
                    shadowOffset: new go.Point(0, 1),
                    shadowColor: "rgba(0, 0, 0, .14)",
                    selectionAdornmentTemplate:  // selection adornment to match shape of nodes
                        $(go.Adornment, "Auto",
                            $(go.Shape, "RoundedRectangle", roundedRectangleParams,
                                { fill: null, stroke: "#7986cb", strokeWidth: 3 }
                            ),
                            $(go.Placeholder)
                        )  // end Adornment
                },
                $(go.Shape, "RoundedRectangle", roundedRectangleParams,
                    { name: "SHAPE", fill: "#ffffff", strokeWidth: 0 },
                    // bluish if highlighted, white otherwise
                    new go.Binding("fill", "isHighlighted", function(h) { return h ? "#e8eaf6" : "#ffffff"; }).ofObject()
                ),
                $(go.Panel, "Vertical",
                    $(go.Panel, "Horizontal",
                        { margin: 8 },
                        $(go.Picture,  // flag image, only visible if a nation is specified
                            { margin: mr8, visible: false, desiredSize: new go.Size(50, 50) },
                            new go.Binding("source", "avatar", theNationFlagConverter),
                            new go.Binding("visible", "username", function(nat) { return nat !== undefined; })
                        ),
                        $(go.Panel, "Table",
                            $(go.TextBlock,
                                {
                                    row: 0, alignment: go.Spot.Left,
                                    font: "16px Roboto, sans-serif",
                                    stroke: "rgba(0, 0, 0, .87)",
                                    maxSize: new go.Size(160, NaN)
                                },
                                new go.Binding("text", "username")
                            ),
                            $(go.TextBlock, textStyle("mobile"),
                                {
                                    row: 1, alignment: go.Spot.Left,
                                    maxSize: new go.Size(160, NaN)
                                },
                                new go.Binding("text", "mobile")
                            ),
                            $("PanelExpanderButton", "INFO",
                                { row: 0, column: 1, rowSpan: 2, margin: ml8 }
                            )
                        )
                    ),
                    $(go.Shape, "LineH",
                        {
                            stroke: "rgba(0, 0, 0, .60)", strokeWidth: 1,
                            height: 1, stretch: go.GraphObject.Horizontal
                        },
                        new go.Binding("visible").ofObject("INFO")  // only visible when info is expanded
                    ),
                    $(go.Panel, "Vertical",
                        {
                            name: "INFO",  // identify to the PanelExpanderButton
                            stretch: go.GraphObject.Horizontal,  // take up whole available width
                            margin: 8,
                            defaultAlignment: go.Spot.Left,  // thus no need to specify alignment on each element
                        },
                        $(go.TextBlock, textStyle("username"),
                            new go.Binding("margin", "headOf", function(head) { return mt8; }),
                            new go.Binding("text", "username", function(username) {
                                return '昵称：'+username;
                            })
                        ),

                        $(go.TextBlock, textStyle("username"),
                            new go.Binding("margin", "headOf", function(head) { return mt8; }),
                            new go.Binding("text", "name", function(name) {
                                return '姓名：'+name;
                            })
                        ),

                        $(go.TextBlock, textStyle("username"),
                            new go.Binding("margin", "headOf", function(head) { return mt8; }),
                            new go.Binding("text", "extension_title", function(extension_title) {
                                return '合伙人等级：'+extension_title;
                            })
                        ),
                    )
                )
            );
        // define the Link template, a simple orthogonal line
        myDiagram.linkTemplate =
            $(go.Link, go.Link.Orthogonal,
                { corner: 5, selectable: false },
                $(go.Shape, { strokeWidth: 3, stroke: "#cccccc" }));  // dark gray, rounded corner links
        // set up the nodeDataArray, describing each person/position
        var nodeDataArray = {$list};
        // create the Model with data for the tree, and assign to the Diagram
        myDiagram.model =
            $(go.TreeModel,
                {
                    nodeParentKeyProperty: "parent_user_id",  // this property refers to the parent node data
                    nodeDataArray: nodeDataArray
                });
        // Overview
        myOverview =
            $(go.Overview, "myOverviewDiv",  // the HTML DIV element for the Overview
                { observed: myDiagram, contentAlignment: go.Spot.Center });   // tell it which Diagram to show and pan
    }
    // the Search functionality highlights all of the nodes that have at least one data property match a RegExp
    function searchDiagram() {  // called by button
        var input = document.getElementById("mySearch");
        if (!input) return;
        input.focus();
        myDiagram.startTransaction("highlight search");
        if (input.value) {
            // search four different data properties for the string, any of which may match for success
            // create a case insensitive RegExp from what the user typed
            var regex = new RegExp(input.value, "i");
            var results = myDiagram.findNodesByExample({ nickname: regex },
                { mobile: regex },
                { performance_level: regex },
                { username: regex });
            myDiagram.highlightCollection(results);
            // try to center the diagram at the first node that was found
            if (results.count > 0) myDiagram.centerRect(results.first().actualBounds);
        } else {  // empty string only clears highlighteds collection
            myDiagram.clearHighlighteds();
        }
        myDiagram.commitTransaction("highlight search");
    };
    if(window.init) {init();}
</script>
</body>
</html>
